<template>
  <div class="asset-report-page">
    <el-card>
      <div style="font-weight: bold; margin-bottom: 16px;">资产统计报表</div>
      <el-row :gutter="32">
        <el-col :span="12">
          <div style="font-weight: bold; margin-bottom: 8px;">资产分类分布</div>
          <div ref="categoryChart" style="height: 320px;"></div>
        </el-col>
        <el-col :span="12">
          <div style="font-weight: bold; margin-bottom: 8px;">资产状态分布</div>
          <div ref="statusChart" style="height: 320px;"></div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import request from '@/utils/request'

const categoryChart = ref(null)
const statusChart = ref(null)
let categoryChartInstance = null
let statusChartInstance = null

const fetchCategoryStat = async () => {
  const res = await request.get('/asset/report/categoryStat')
  if (res.code === 1) {
    renderCategoryChart(res.data)
  }
}
const fetchStatusStat = async () => {
  const res = await request.get('/asset/report/statusStat')
  if (res.code === 1) {
    renderStatusChart(res.data)
  }
}
const renderCategoryChart = (data) => {
  if (!categoryChartInstance) {
    categoryChartInstance = echarts.init(categoryChart.value)
  }
  categoryChartInstance.setOption({
    tooltip: { trigger: 'item' },
    legend: { top: 'bottom' },
    series: [
      {
        name: '资产分类',
        type: 'pie',
        radius: '60%',
        data: data.map(item => ({ name: item.categoryName, value: item.count }))
      }
    ]
  })
}
const renderStatusChart = (data) => {
  if (!statusChartInstance) {
    statusChartInstance = echarts.init(statusChart.value)
  }
  const statusMap = { 1: '在用', 0: '闲置' }
  statusChartInstance.setOption({
    tooltip: { trigger: 'item' },
    legend: { top: 'bottom' },
    series: [
      {
        name: '资产状态',
        type: 'pie',
        radius: '60%',
        data: data.map(item => ({ name: statusMap[item.status] || ('类型' + item.status), value: item.count }))
      }
    ]
  })
}
onMounted(() => {
  fetchCategoryStat()
  fetchStatusStat()
})
</script>

<style scoped>
.asset-report-page {
  padding: 24px;
}
</style> 